<!--  高阶输入框模板  -->
<template>
  <div class="page-container">
    <div>SKU通用选择</div>

    <div>库区库位测试</div>
    <base_area_select v-model="form.area" :warehouseId="$loginUser.currentWarehouseId" />
    <base_location_select v-model="form.location" :areaId="form.area" />
    <div>商品品类测试</div>

    <el-form ref="form" label-width="auto" label-position="top" label-suffix="">


      <el-form-item label="通用组件模板 ex_super_input 额外属性可直接参照element文档写。依照不同type生成不同组件">
        <el-radio-group v-model="test_type">
          <el-radio-button label="text"></el-radio-button>
          <el-radio-button label="input"></el-radio-button>
          <el-radio-button label="select"></el-radio-button>
          <el-radio-button label="time-select"></el-radio-button>
          <el-radio-button label="time-picker"></el-radio-button>
          <el-radio-button label="date-picker"></el-radio-button>
          <el-radio-button label="input-number"></el-radio-button>
          <el-radio-button label="upload-file"></el-radio-button>

        </el-radio-group>
        <ex_super_input class="form_input_default" :type="test_type" :value="test_type" :placeholder="test_type" />



      </el-form-item>
      <el-form-item label="通用组件模板 ex_super_input 基础模板 ">
        <ex_super_input class="form_input_default" placeholder="文本输入框" v-model="test_value" />
        <ex_super_input class="form_input_default" type="input-number" placeholder="数字输入框" />
        <ex_super_input class="form_input_default" type="select" :items="[{ label: 'test', value: 't' }]"
          placeholder="本地选择器" v-model="test_value" />
        <ex_super_input class="form_input_default" type="select" enum="YesOrNoEnum" placeholder="枚举选择器"
          v-model="test_value" />
        <ex_super_input class="form_input_default" type="date-picker" placeholder="时间选择器" v-model="test_value" />
        <ex_super_input class="form_input_default" type="date-picker" :attrs="{ type: 'datetimerange' }"
          placeholder="时间范围选择器" />

        <ex_super_input class="form_input_default" type="upload-file" />
      </el-form-item>
    </el-form>
    <div>通用表单模板 ex_super_form 内部利用ex_super_input直接使用json生成表单 </div>
    <ex_super_form :model="test_form_model" label-width="auto" inputClass="form_input_default"></ex_super_form>
    <div>通用表格模板 ex_super_table 内部利用ex-table-auto直接使用json生成表格 </div>
    <ex_super_table :model="test_table_model" :data="[{}, {}, {}]">
    </ex_super_table>
    <div>通用页面模板 ex_super_table_page 内部利用ex_super_form生成搜索栏，利用ex_super_table生成表格 </div>
    <ex_super_table_page :search="{ model: test_form_model }" :table="{ model: test_table_model, url: 'test' }"
      style="min-height:500px">
    </ex_super_table_page>
  </div>
</template>
<script>

export default {
  title: "通用组件模板",
  components: {  },
  data() {
    return {
      form: {
        area: null, location: null,
      },
      test_type: 'input',
      test_value: null,
      test_form_model: [
        { key: 'test_j0', label: '文本输入', type: 'input' },
        { key: 'test_j1', label: '数字输入', type: 'input-number' },
        { key: 'test_j2', label: '日期选择', type: 'date-picker' },
        { key: 'test_j3', label: '时间选择', type: 'time-picker' },
        { key: 'test_j4', label: '时间选择', type: 'time-select' },
        { key: 'test_j5', label: '枚举数据', type: 'select', enum: 'YesOrNoEnum' },
        { key: 'test_j6', label: '本地数据', type: 'select', items: [{ label: 'test', value: 'tset' }] },
        {
          key: 'test_j7', label: '远端数据', type: 'select', url: "/ums-api/user/UserInfoRpc/getUserDict.json",
          option: { label: 'userName', value: 'userId' },
        },
      ],
      test_table_model: [
        { type: 'selection', clickToggle: true, },
        { key: 'receivingOrderCode', label: 'label_order_code', 'min-width': 140, 'show-overflow-tooltip': true, },
        { key: 'customerName', label: '客户编码', 'width': 120, formatter: (r, c, v, i) => this.$enumShow(v, "InboundTypeEnum") },
        { key: 'customerName', label: '客户编码', 'width': 120, formatter: (r, c, v, i) => "testt" },
        {
          type: 'operate', width: 210, operate: [
            {
              label: "复核",

              click: (row) => {
              }
            },

            {
              label: '删除', type: "confirm-button", buttonClass: "button_text_danger", confirmButtonType: 'danger',

              url: '/oms-api/receiving/InboundReceivingRpc/delete.json', message: '确定要删除该记录吗？',
              params: (v) => { return { receivingId: v.id } }, done: ['reload', 'tip']
            },
            {
              type: 'more',
              items: [
                { label: 'label_view_detail', click: (row) => this.clickDetail(row) },

                { label: '下载附件' },
                { label: '打印条码', },
                { label: '订单轨迹', },
                { label: '查看任务单' },
                { label: '查看应收' },
                { label: 'label_report_exception' },
              ]
            }
          ],
        },
      ],
    };
  },

  watch: {
  },

  //生命周期钩子函数
  beforeCreate() { },
  created() {  },
  beforeMount() { },
  mounted() {  },
  beforeUpdate() { },
  updated() {  },
  activated() {  },
  deactivated() {  },
  beforeDestroy() { },
  destroyed() {  },
  errorCaptured() { },
  //Vue实例方法列表
  methods: {
    test(e) {

    }
  },
};
</script>
<style  scoped></style>
